

// 获取localStorage的arr数组
let arr = JSON.parse(localStorage.getItem('arr'))

// 调用函数 动态生成页面
setPage()


function setPage() {


    // 声明变量 存储数组遍历的次数 
    let noNum = 0;
    // 声明变量 存储件数
    let strNum = 0
    // 声明变量 存储价格
    let strMoney = 0

    //声明变量 存储字符串数据
    let strHead = `
        <div name="bigBox" class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all" type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
 
      `
    // 写入内容
    $('.container').html(strHead)


    let strBody = ''

    //创建新的数组
    let newarr = []

    // 数组中的对象去重
    arr = arr.reduce((item, next) => {
        newarr[next.goods_id] ? '' : newarr[next.goods_id] = true && item.push(next)
        return item
    }, [])

    console.log(arr)



    // 循环遍历数组
    arr.forEach(function (item) {

        strBody += `
          
                <li class="cart-item" gd="${item.goods_id}">
                    <div class="left">
                      <input type="checkbox" name="other">
                    </div>
                    <div class="right">
                      <div class="media">
                        <div class="media-left">
                          <a href="#">
                            <img class="media-object" src="${item.goods_small_logo}" alt="...">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">${item.goods_name}</h4>
                          <p>
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>${item.goods_price}</span>
                          </p>
                          <div class="btn-group pull-right" role="group" aria-label="...">
                            <button name="jian" type="button" class="btn btn-default">-</button>
                            
                            <button goods_number="${item.goods_number}" name="count" type="button" class="btn btn-default" disabled>${item.ipt}</button>
                            
                            <button name="jia" type="button" class="btn btn-default">+</button>
                          </div>
                          <button name="del" class="del btn btn-danger">我不要了</button>

                        </div>
                      </div>
                    </div>
                  </li>

        `
        // 存储件数
        strNum += Number(item.ipt)
        // 存储价格
        strMoney += Number(item.ipt) * Math.ceil((Number(item.goods_price)))

    })

    // 写入数据数值
    $('ul').html(strBody)

    /*
        向localStorage传入数据数值 
        购买了几种商品    kind
        购买了几件        count
        共需要支付的价格  tp
      */
    // 循环到最后一次的时候 , 获取商品数量 件数 总价格


    // 尾部内容 显示价格
    let strFooter = `
            </ul>
                <div>
                  <h1>您一共购买${arr.length}种商品</h1>
                  <h1>您一共购买${strNum}件商品</h1>
                  <h1>您一共需要支付${strMoney}元</h1>
                </div>
              </div>
            </div>
        `

    // 写入数据数值
    $('ul').after(strFooter)


    aa()
}




function aa() {
    // 全选按钮点击事件
    $('[name="all"]').click(function () {
        $('[name="other"]').prop('checked', this.checked)
    })

    // 商品按钮添加点击事件
    $('[name="other"]').click(function () {
        //判断input点击事件

        console.log(123)

        if ($(this).prop('checked') === false) {
            $('[name="all"]').prop('checked', false)
        } else if ($('[name="other"]').prop('checked') === true) {
            $('[name="all"]').prop('checked', true)
        }

    })


    // 我不要了按钮的点击事件  
    $('[name="del"]').click(function () {
        // 找到祖先标签li 删除
        $(this).parents('.cart-item').remove()
        // 删除数组中的该对象 , 新的arr覆盖localStorage中的arr
        arr.splice(arr.indexOf(arr.find(function (e) { return e.goods_id === this.goods_id }), 1))
        localStorage.setItem('arr', JSON.stringify(arr))

        // 调用函数 动态生成页面
        setPage()
    })


    // 加号按钮点击事件
    $('[name="jia"]').click(function () {

        // 大于库存 不能累加 小于库存 累加一
        $(this).prev().html() - 0 >= $(this).prev().attr('goods_number') - 0 ? $(this).prev().html() - 0 : $(this).prev().html($(this).prev().html() - 0 + 1)

        // 调用函数 动态生成页面
        setPage()
    })

    // 减号按钮点击事件
    $('[name="jian"]').click(function () {
        // 大于1 才能累减
        $(this).next().html() - 0 <= 1 ? $(this).next().html() - 0 : $(this).next().html($(this).next().html() - 0 - 1)

        console.log(123)

        // 调用函数 动态生成页面
        setPage()
    })




}




/*

      // 刷新页面
    $(document).ready(function () {
        if(location.href.indexOf("#reloaded")==-1){
          location.href=location.href+"#reloaded";
          location.reload();
        }
      })

*/
